import { useEffect, useState } from "react";
import http from "../../axios/api";
import { List, InfiniteScroll, Tag } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { List as VirtualizedList, AutoSizer } from "react-virtualized";

function AllList() {
    const [list, setList] = useState([]);
    const navigate = useNavigate();

    const getList = async () => {
        // const all_list = localStorage.getItem('all_list');
        // if (all_list) {
        //     setList(JSON.parse(all_list))
        //     return;
        // }
        const res = await http.get("/api/order/list");
        const { code, data } = res.data;
        if (code == 200) {

            // 为了完成退票， 需要给列表数据增加一个字段，表示车票的状态， 已支付，已退款，
            // data.forEach(item => {
            //     item.status = "已支付";
            // })
            // localStorage.setItem('all_list', JSON.stringify(data))

            setList(data);
        }
    };

    useEffect(() => {
        getList();
    }, []);

    const clickFn = (id) => {
        navigate(`/orderL?id=${id}`);
    };

    function rowRenderer({ index, key, style }) {
        const item = list[index];
        return (
            <List.Item
                style={style}
                key={key}
                onClick={() => clickFn(item.id)}
                extra={<Tag>{item.status}</Tag>}
            >
                <div>
                    <span>订单ID: </span>{item.id}
                </div>
                <div>
                    <span>城市: </span>{item.start} - {item.end}
                </div>
                <div>
                    <span>时间: {item.startTime}</span>
                    <span>金额: {item.price}</span>
                </div>
            </List.Item>
        );
    }

    return (
        <div style={{ height: "100%", overflowY: "auto" }}>

            <List>
                <AutoSizer disableHeight>
                    {({ width }) => (
                        <VirtualizedList
                            rowCount={list.length}
                            rowRenderer={rowRenderer}
                            width={width}
                            height={480}
                            rowHeight={110}
                            overscanRowCount={10}
                        />
                    )}
                </AutoSizer>
            </List>

        </div>
    );
}

export default AllList;
